window.onload = function () {
    new Rolldate({
        el: '#date-group1-4',
        format: 'YYYY-MM-DD hh:mm',
        beginYear: 2000,
        endYear: 2100
    })
}

$(function () {
    /**
     * 通过数组id获取地址列表数组
     *
     * @param {Number} id
     * @return {Array} 
     */
    function getAddrsArrayById(id) {
        var results = [];
        if (addr_arr[id] != undefined)
            addr_arr[id].forEach(function (subArr) {
                results.push({
                    key: subArr[0],
                    val: subArr[1]
                });
            });
        else {
            return;
        }
        return results;
    }
    /**
     * 通过开始的key获取开始时应该选中开始数组中哪个元素
     *
     * @param {Array} StartArr
     * @param {Number|String} key
     * @return {Number} 
     */
    function getStartIndexByKeyFromStartArr(startArr, key) {
        var result = 0;
        if (startArr != undefined)
            startArr.forEach(function (obj, index) {
                if (obj.key == key) {
                    result = index;
                    return false;
                }
            });
        return result;
    }

    //bind the click event for 'input' element
    $("#myAddrs").click(function () {
        var PROVINCES = [],
            startCities = [],
            startDists = [];
        //Province data，shall never change.
        addr_arr[0].forEach(function (prov) {
            PROVINCES.push({
                key: prov[0],
                val: prov[1]
            });
        });
        //init other data.
        var $input = $(this),
            dataKey = $input.attr("data-key"),
            provKey = 1, //default province 北京
            cityKey = 36, //default city 北京
            distKey = 37, //default district 北京东城区
            distStartIndex = 0, //default 0
            cityStartIndex = 0, //default 0
            provStartIndex = 0; //default 0

        if (dataKey != "" && dataKey != undefined) {
            var sArr = dataKey.split("-");
            if (sArr.length == 3) {
                provKey = sArr[0];
                cityKey = sArr[1];
                distKey = sArr[2];

            } else if (sArr.length == 2) { //such as 台湾，香港 and the like.
                provKey = sArr[0];
                cityKey = sArr[1];
            }
            startCities = getAddrsArrayById(provKey);
            startDists = getAddrsArrayById(cityKey);
            provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
            cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
            distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
        }
        var navArr = [{ //3 scrollers, and the title and id will be as follows:
            title: "星期",
            id: "scs_items_prov"
        }, {
            title: "时",
            id: "scs_items_city"
        }, {
            title: "分",
            id: "scs_items_dist"
        }];
        SCS.init({
            navArr: navArr,
            onOk: function (selectedKey, selectedValue) {
                $input.val(selectedValue).attr("data-key", selectedKey);
            }
        });
        var distScroller = new SCS.scrollCascadeSelect({
            el: "#" + navArr[2].id,
            dataArr: startDists,
            startIndex: distStartIndex
        });
        var cityScroller = new SCS.scrollCascadeSelect({
            el: "#" + navArr[1].id,
            dataArr: startCities,
            startIndex: cityStartIndex,
            onChange: function (selectedItem, selectedIndex) {
                distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
            }
        });
        var provScroller = new SCS.scrollCascadeSelect({
            el: "#" + navArr[0].id,
            dataArr: PROVINCES,
            startIndex: provStartIndex,
            onChange: function (selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
                cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
                distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
            }
        });
    });
});



Vue.component('tab-date', {
    template: `
      <div class="date">
        <input readonly class="form-control" type="text" id="date-group1-4" placeholder="请选择日期">
        <button>添加闹钟</button>
      </div>
  `
})
Vue.component('tab-day', {
    template: `
      <div class="day" style="text-align:center">
        <input type="text" readonly placeholder="请选择日期" id="myAddrs" name="addr" data-key="1-36-37" value="星期一 00 00" />
        <button>添加闹钟</button>
      </div>
  `
})

var vm = new Vue({
    el: '#app',
    data: {
        currentTab: 'tab-date',
        nz_list: [], //闹钟列表
        showPicker: false, //活动闹钟星期选择展示标识
        xingqi_date: '',
        columns: [ // 第一列
            {
                values: ['每日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
                defaultIndex: 2,
            },
            // 第二列
            {
                values: ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', ],
                defaultIndex: 1,
            },
            //第三列
            {
                values: ['00分', '01分', '02分', '03分', '04分', '05分', '06分', '07分', '08分', '09分', '10分', '11分', '12分', '13分', '14分', '15分', '16分', '17分', '18分', '19分', '20分', '21分', '22分', '23分', '24分', '25分', '26分', '27分', '28分', '29分', '30分', '31分', '32分', '33分', '34分', '35分', '36分', '37分', '38分', '39分', '40分', '41分', '42分', '43分', '44分', '45分', '46分', '47分', '48分', '49分', '50分', '51分', '52分', '53分', '54分', '55分', '56分', '57分', '58分', '59分'],
                defaultIndex: 0,
            },
        ]
    },
    computed: {

    },
    methods: {
        // 添加闹钟
        add_nz: function (type) {
            var obj = {};
            obj.type = type;
            if (type == 0) {
                // 日期/时间
                var dom = $('.date>input');
            } else if (type == 1) {
                // 星期/时间
                var dom = $('.day>input')
            }
            var value = dom.val();
            // console.log(value);
            if (!value) {
                vant.Toast('请选择时间');
                return;
            }
            obj.value = value;
            if (type == 0) {
                // 日期/时间
                var date = new Date(obj.value);
                obj.alert_time = date.getTime() / 1000;
            } else if (type == 1) {
                var reg = /每日/;
                if (reg.test(value)) {
                    // 如果是每日的话
                    for (var i = 1; i < 8; i++) {
                        var mobj = {};
                        mobj.type = type;
                        switch (i) {
                            case 1:
                                mobj.value = value.replace('每日', '星期一');
                                break;
                            case 2:
                                mobj.value = value.replace('每日', '星期二');
                                break;
                            case 3:
                                mobj.value = value.replace('每日', '星期三');
                                break;
                            case 4:
                                mobj.value = value.replace('每日', '星期四');
                                break;
                            case 5:
                                mobj.value = value.replace('每日', '星期五');
                                break;
                            case 6:
                                mobj.value = value.replace('每日', '星期六');
                                break;
                            case 7:
                                mobj.value = value.replace('每日', '星期天');
                                break;
                        };
                        var str2 = value.match(/\d+/g).join('');
                        var str = i + str2;
                        mobj.alert_time = str;
                        this.nz_list.push(mobj);
                        $.cookie('nz_list', JSON.stringify(this.nz_list));
                    }
                    return;
                }
                // 星期/时间
                var str1 = obj.value.match(/(?<=星期)\D/g)[0];
                // console.log(str1);
                switch (str1) {
                    case '一':
                        str1 = '1';
                        break;
                    case '二':
                        str1 = '2';
                        break;
                    case '三':
                        str1 = '3';
                        break;
                    case '四':
                        str1 = '4';
                        break;
                    case '五':
                        str1 = '5';
                        break;
                    case '六':
                        str1 = '6';
                        break;
                    case '天':
                        str1 = '7';
                        break;
                };
                var str2 = obj.value.match(/\d+/g).join('');
                var str = str1 + '' + str2;
                obj.alert_time = str;
            }

            this.nz_list.push(obj);
            $.cookie('nz_list', JSON.stringify(this.nz_list));
        },
        // 删除闹钟
        del_nz: function (index) {
            this.nz_list.splice(index, 1);
            $.cookie('nz_list', JSON.stringify(this.nz_list));
        },
        // 星期选择确认事件
        onConfirm: function (value) {
            this.xingqi_date = value.join('');
            var that = this;
            setTimeout(function () {
                that.showPicker = false;
            }, 100)
        },
        // 读缓存
        read_cookie: function () {
            var nz_cookie = $.cookie('nz_list');
            if (nz_cookie == 'null') {
                return;
            }
            if (nz_cookie) {
                this.nz_list = JSON.parse(nz_cookie);
            }
        }
    },
    watch: {

    },
    mounted: function () {
        this.read_cookie();
    }
})


function riqi() {
    $('.nav span:nth-of-type(1)').addClass('clo')
    $('.nav span:nth-of-type(2)').removeClass('clo')
    $('.date').show()
    $('.day').hide()
}

function xingqi() {
    $('.nav span:nth-of-type(1)').removeClass('clo')
    $('.nav span:nth-of-type(2)').addClass('clo')
    $('.date').hide()
    $('.day').css('display', 'flex')
}